<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar>
      <!-- 左边logo框 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 右边按钮+搜索 -->
      <template #right>
        <van-button round class="search-btn" icon="search" to="/search"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- tab栏 -->
    <!-- v-model绑定的是tab栏的选中状态，选谁active就等于谁的下标 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in userChanneList" :key="item.id" :title="item.name">
        <!-- 使用子组件 -->
        <article-list :channel_id="item.id" />
      </van-tab>
      <div class="icon-box">
        <van-icon name="wap-nav" @click="channelShow = true" />
      </div>
    </van-tabs>
    <!-- 频道sheet框 -->
    <van-action-sheet v-model="channelShow" title="频道管理">
      <!-- 放置频道子组件 -->
      <!-- 传值给子组件 -->
      <channels
        :ownChannels="userChanneList"
        :allChannels="channelAllLis"
        v-model="active"
        @close="channelShow = false"
      />
    </van-action-sheet>
  </div>
</template>

<script>
// 导入新闻组件
import articleList from "./articleList.vue";
// 导入频道子组件
import channels from "./channels.vue";
// 导入频道请求接口(我的频道和所有频道接口)
import { userChannelAPI, channelAllAPI } from "@/api";
import { saveChannel, getChannel } from "@/utils/storage";
export default {
  // 注册组件
  components: {
    articleList,
    channels,
  },
  data() {
    return {
      active: 0,
      userChanneList: [],
      channelShow: false,
      channelAllLis: [],
    };
  },
  // tab栏渲染获取用户我的频道数据和所有频道列表数据
  async created() {
    // 判断是否登录登陆了
    /* if (this.$store.state.tokenObj.token) {
      // 登陆了获取用户自己得评到数据
      // 获取用户频道数据
      let res = await userChannelAPI();
      this.userChanneList = res.data.data.channels;
    } else {
      // 没登陆
      // 获取本地存取得数据
      let res = getChannel();
      // 判断本地存储是否有数据
      if (res) {
        // 有数据直接把数据给res1
        this.userChanneList = res;
      } else {
        // 没有就发请求获取默认频道
        let res = await userChannelAPI();
        this.userChanneList = res.data.data.channels;
      }
    }
    */
    //  优化以上代码：经分析发现，如果有token或本地存储为空的的情况下都需要发同一个请求
    let local = getChannel();
    if (this.$store.state.tokenObj.token || !local) {
      // 没有就发请求获取默认频道
      let res = await userChannelAPI();
      this.userChanneList = res.data.data.channels;
    } else {
      // 没登陆且本地有数据
      this.userChanneList = local;
    }

    // 可选频道得数据
    let res1 = await channelAllAPI();
    this.channelAllLis = res1.data.data.channels;
  },
};
</script>

<style lang='less' scoped>
.home {
  .logo {
    width: 120px;
    height: 100%;
    background: url("../../assets/logo.png") no-repeat center / contain;
  }
  .search-btn {
    width: 100px;
    height: 33px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    .van-icon-search {
      color: #fff;
    }
  }
  // tab的样式
  .van-tabs {
    position: relative;
    ::v-deep .van-tabs__wrap {
      width: 351px;
    }
    .icon-box {
      position: absolute;
      top: 0;
      right: 0;
      height: 44px;
      display: flex;
      align-items: center;
      .van-icon {
        font-size: 24px;
      }
    }
  }
}
</style>